import { Button, Flex, Modal } from "antd";

import { UserAccountDataType } from "@/types/user";

type PassModalProps = {
  data: UserAccountDataType | UserAccountDataType[] | null;
  open: boolean;
  onCancel: () => void;
  onOk: () => void;
  loading?: boolean;
};

export default function PassModal({ data, open, onCancel, onOk, loading }: PassModalProps) {
  console.log("pass modal data: ", data);
  if (!data) return null;

  const renderContent = () => {
    if (Array.isArray(data)) {
      const isPending = data.some((account) => account.status === "pending");
      if (isPending) {
        return `是否确定将以下账号的绑定状态修改为通过？\n${data.map((account) => account.nickname).join("、")}`;
      } else {
        return `此用户【${data.map((account) => account.nickname).join("】、【")}】帐号绑定已驳回，是否修改为通过？`;
      }
    } else if (!Array.isArray(data)) {
      const { status, nickname } = data;
      if (status === "pending") {
        return `是否确定将此用户的【${nickname}】的帐号绑定修改为通过？`;
      } else if (status === "denied") {
        return `此用户【${nickname}】帐号绑定已驳回，是否修改为通过？`;
      }
    }
  };

  return (
    <Modal open={open} centered footer={false} closable={false}>
      <Flex vertical gap={20} className="pt-4">
        <h1 className="text-base font-bold text-center">
          <span className="w-4/5" style={{ whiteSpace: "pre-line" }}>
            {renderContent()}
          </span>
        </h1>
        <Flex gap={32} justify="center">
          <Button type="primary" ghost onClick={onCancel}>
            取消
          </Button>
          <Button type="primary" onClick={onOk} loading={loading}>
            确定
          </Button>
        </Flex>
      </Flex>
    </Modal>
  );
}
